<template>
  <div class="city-box">
    <el-row :gutter="6">
      <el-col :span="12">
        <CityCard :city="adviceCityList[0]"></CityCard>
      </el-col>
      <el-col :span="6" v-for="city in adviceCityList.slice(1,3)" >
        <CityCard :city="city"></CityCard>
      </el-col>

    </el-row>

    <el-row :gutter="6" >
      <el-col :span="6" v-for="city in adviceCityList.slice(3,7)">
        <CityCard  :city="city"></CityCard>
      </el-col>
    </el-row>

    <el-row :gutter="6">
      <el-col :span="6" v-for="city in adviceCityList.slice(7,9)">
        <CityCard  :city="city"></CityCard>
      </el-col>

      <el-col :span="12">
        <CityCard :city="adviceCityList[9]"></CityCard>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CityCard from "@/components/card/CityCard.vue";

export default {
  name: "CityBox",
  components: {CityCard},
  data() {
    return {
      adviceCityList:[
        {
          image:"https://image.student.com/max_1250x700/city-london-l@2x-dfcde39784f0431b8d3faab2878886e4.jpg",
          name:"伦敦",
          apartmentNum:1
        },
        {
          image:"https://image.student.com/max_1250x700/city-manchester-s@2x-337fc03db56c7ab7e4708c9942a152f8.jpg",
          name:"曼彻斯特",
          apartmentNum:1
        },
        {
          image:"https://image.student.com/max_1250x700/city-sheffield-s@2x-e351ee644731a9c70ddd5006ad316cf6.jpg",
          name:"谢菲尔德",
          apartmentNum:1
        },
        {
          image:"https://image.student.com/max_1250x700/city-liverpool-s@2x-7c51269ed9c009171d6cecd9d81c8e27.jpg",
          name:"利物浦",
          apartmentNum:1
        },
        {
          image:"https://image.student.com/max_1250x700/city-melbourne-s@2x-6fbad46bbfcae251d3138b9be8f01bfc.jpg",
          name:"墨尔本",
          apartmentNum:1
        },
        {
          image:"https://image.student.com/max_1250x700/city-montreal-s@2x-615fe3b39ab226a526d9b2b822a40eb9.jpg",
          name:"蒙特利尔",
          apartmentNum:1
        },
        {
          image:"https://image.student.com/max_1250x700/city-los-angeles-s@2x-d41356cc22d8a4831130af728703a126.jpg",
          name:"洛杉矶",
          apartmentNum:1
        },
        {
          image:"https://image.student.com/max_1250x700/city-montpellier-s@2x-34cf917593131259de69d5a153ee2ff8.jpg",
          name:"蒙彼利埃",
          apartmentNum:1
        },
        {
          image:"https://image.student.com/max_1250x700/city-singapore-s@2x-7fb1fff43d4e7d3e07e22dad3626753b.jpg",
          name:"新加坡",
          apartmentNum:1
        },
        {
          image:"https://image.student.com/max_1250x700/city-sydney-l@2x-3445afd13c13e878830448feb4cf12ed.jpg",
          name:"悉尼",
          apartmentNum:1
        },
      ]
    }
  },
  methods: {}
}
</script>

<style scoped lang="less">
  .city-box{
    .el-row{
      margin-bottom: 10px;
    }
  }
</style>